<template>
  <div class="all">
    <zkds
      :floorList="floorList"
      ref="model"
      @clickPosition="clickPosition"
      @clickPoint="clickPoint"
    ></zkds>
    <div class="btns flex flex-around">
      <div
        class="btn-item"
        v-for="el in sceneList"
        :key="el.name"
        @click="clickBtn(el)"
      >
        {{ el.name }}
      </div>
    </div>
    <model-box ref="modelbox">
      <box169 slot="iframe">
        <iframe :src="iframeUrl" frameborder="0"></iframe>
      </box169>
    </model-box>
  </div>
</template>

<script>
import { getaGwlist } from "@/api/request.js";
import zkds from "@/components/threeView/zkds.vue";
export default {
  name: "App",
  components: {
    zkds,
  },
  data() {
    return {
      iframeUrl: "",
      floorList: [
        {
          name: "一层",
          floor: 1,
          fileName: "/zkds/01.glb",
        },
      ],
      sceneList: [
        {
          name: "前台",
          pos: { x: 10, y: 1, z: -4 },
          cmpos: { x: 8.5, y: 1.2, z: -4 },
        },
        {
          name: "治疗室",
          pos: { x: 11, y: 1, z: -9 },
          cmpos: { x: 9, y: 1.5, z: -9 },
        },
        {
          name: "处置室",
          pos: { x: 15, y: 1, z: -10 },
          cmpos: { x: 15, y: 2, z: -9 },
        },
        {
          name: "诊室",
          pos: { x: 7, y: 1, z: -8 },
          cmpos: { x: 7, y: 2, z: -6 },
        },
        {
          name: "VIP病房",
          pos: { x: 4, y: 1, z: -8 },
          cmpos: { x: 5, y: 2, z: -6 },
        },
        {
          name: "普通病房",
          pos: { x: 3, y: 1, z: 2 },
          cmpos: { x: 4, y: 1.5, z: 0.8 },
        },
        {
          name: "会议室",
          pos: { x: 6, y: 1, z: 1.5 },
          cmpos: { x: 6, y: 2, z: 5 },
        },
      ],
    };
  },
  mounted() {
    this.$refs.model.addPoint(window.g.point);
  },
  methods: {
    clickPosition(pos) {
      console.log(pos, "点击坐标");
      // this.$refs.model.changeScene(pos)
    },
    clickPoint(res) {
      this.$refs.modelbox.open(res);
      this.iframeUrl = res.url;
    },
    clickBtn(el) {
      this.$refs.model.changeScene(el);
    },
    updateAir(res) {
      this.airList.forEach((el) => {
        el.data = res.find((em) => em.id === el.id);
      });
      this.$refs.model.addAirshow(this.airList);
    },
    init() {
      getaGwlist({ site: "16f" }).then((res) => {
        console.log(res, "接受指令更新数据");
        if (res.data && res.data.length > 0) {
          this.gxggList.forEach((el) => {
            const da = res.data.find((em) => em.code === el.code);
            if (da) {
              el.useStatus = da.useStatus;
            }
          });
          this.$refs.model.addmian(this.gxggList);
        }
      });
    },
  },
};
</script>

<style>
.btns {
  position: fixed;
  bottom: 20px;
  z-index: 9999;
  width: 100%;
}
.btn-item {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 4px 10px;
  color: #fff;
  cursor: pointer;
}
</style>
